import React, { Component } from 'react'
import "./less/Practice.less"
import { connect } from "react-redux"
import { FenleiApi } from "../request/api"
import Goback from '../components/Goback'

class Practice extends Component {
  state = {
    // all 全部  err 错误 done 已做  notdone  未做
    testType: "all",
    // 学科的数组
    testTypeArr: [
      { key: "all", cn: "全部" },
      { key: "err", cn: "错误" },
      { key: "done", cn: "已做" },
      { key: "notdone", cn: "未做" },
    ],
    // 默认的激活状态
    fenleiAcitve: "all",
    // 题目的分类数组
    fenleiArr: [],
    numActive: 5,
    // 做题数量的数组
    numArr: [5, 10, 20, 30, 50, 100]
  }
  render() {
    return (
      <div className="practice">
        <div className="top">
          <div className='btn btn1' onClick={this.goExam.bind(this)}>进入练习模式</div>
          <div className='btn btn2' onClick={this.goExamFail.bind(this)}>进入考试模式(暂未开放)</div>
        </div>
        <div className="title">当前学科</div>
        <ul className='list'>
          {
            this.state.testTypeArr.map(item => (
              <li
                key={item.key}
                className={this.state.testType === item.key ? 'active' : ''}
                onClick={this.changeTestType.bind(this, item.key)}
              >{item.cn}</li>
            ))
          }
        </ul>
        <div className="title">题目类型</div>
        <ul className='list'>
          {
            this.state.fenleiArr.map(item => (
              <li key={item.key} className={this.state.fenleiAcitve === item.key ? 'active' :
                ''} onClick={() => this.setState({ fenleiAcitve: item.key })}>{item.cn}{item.value}</li>
            ))
          }
        </ul>
        <div className="title">做题数量</div>
        <ul className='list'>
          {
            this.state.numArr.map(item => (
              <li key={item} className={this.state.numActive === item ? 'active' : ''} onClick={() => {
                this.setState({ numActive: item })
              }}>{item}</li>
            ))
          }
        </ul>

        <Goback />
      </div>
    )
  }
  // 跳转到题目列表 (考试的页面)
  goExam() {
    this.props.history.push({
      pathname: "/exam", state: {
        // 携带参数
        testNum: this.state.numActive,
        testType: this.state.testType,
        actionCode: this.props.match.params.actionCode,
        questionType: this.state.fenleiAcitve
      }
    })
  }
  // 功能未开放的提示
  goExamFail() {
    // this.props
    this.props.showToastFn();
    setTimeout(() => {
      this.props.hideToastFn()
    }, 2000)
  }
  // 修改testType
  changeTestType(key) {
    this.setState({ testType: key }, () => {
      // 调用获取数据的函数
      this.getDataFn()
    })
  }
  getDataFn() {
    // 接收一个首页的参数

    let actionCode = this.props.match.params.actionCode
    console.log(actionCode);
    FenleiApi({
      actionCode,
      testType: this.state.testType
    }).then(res => {
      let arr = res.data
      console.log(res);
      arr.forEach(item => {
        switch (item.key) {
          // 枚举：all 全部, qa 问答, fill 填空, one 单选, check 判断, code 编程, many 多选
          case "all":
            item.cn = "全部"
            break;
          case "qa":
            item.cn = "问答"
            break;
          case "fill":
            item.cn = "填空"
            break;
          case "one":
            item.cn = "单选"
            break;
          case "check":
            item.cn = "判断"
            break;
          case "code":
            item.cn = "编程"
            break;
          case "many":
            item.cn = "多选"
            break;
          default:
            break
        }
      });
      if (res.errCode === 0) {
        this.setState({ fenleiArr: arr }, () => {
          console.log(this.state.fenleiArr);
        })
      }

    })
  }
  componentDidMount() {
    this.getDataFn()
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    showToastFn() {
      dispatch({
        type: 'showToastFn', value: {
          icon: "none",
          title: "该功能暂未开放"
        }
      })
    },
    hideToastFn() {
      dispatch({ type: "hideToastFn" })
    }
  }
}
export default connect(null, mapDispatchToProps)(Practice)